<template>
    <div style="width: 100%">
        <template>
            <el-header class="p_sys_logo">
                <i class="el-icon-user-solid system_logo"></i>
            </el-header>
            <!-- :default-active="onRoutes" 用于激活当前路径-->

            <el-menu
                :default-active="onRoutes"
                class="el-menu-vertical-demo"
                theme="dark"
                unique-opened
                router
                :collapse="collapse"
            >
                <template v-for="item in items">
                    <template v-if="item.subs">
                        <el-submenu :index="item.index" :key="item.index">
                            <template slot="title"
                                ><i :class="item.icon"></i>
                                <span>{{ item.title }}</span></template
                            >
                            <el-menu-item
                                v-for="(subItem, i) in item.subs"
                                :key="i"
                                :index="subItem.index"
                                ><span>{{ subItem.title }}</span>
                            </el-menu-item>
                        </el-submenu>
                    </template>
                    <template v-else>
                        <el-menu-item :index="item.index" :key="item.index">
                            <i :class="item.icon"></i><span>{{ item.title }}</span>
                        </el-menu-item>
                    </template>
                </template>
            </el-menu>
            <!-- </div> -->
        </template>
    </div>
</template>

<script>
import eventBus from "../../utils/eventBus";
export default {
    data() {
        return {
            collapse: false,
            items: [
                {
                    icon: "el-icon-setting",
                    index: "readme",
                    title: "简介",
                },
                {
                    icon: "el-icon-setting",
                    index: "home",
                    title: "综合管理",
                    subs: [
                        {
                            index: "homeg",
                            title: "首页",
                        },
                        {
                            index: "userCenterall",
                            title: "个人中心",
                        },
                    ],
                },
                {
                    icon: "el-icon-setting",
                    index: "userCenter",
                    title: "设置",
                    subs: [
                        {
                            index: "upload",
                            title: "文件上传",
                        },
                        {
                            index: "modifyUser",
                            title: "修改用户",
                        },
                        {
                            index: "modifyPassword",
                            title: "修改密码",
                        },
                    ],
                },
                {
                    icon: "el-icon-setting",
                    index: "readerCenter",
                    title: "读者用户管理",
                    subs: [
                        {
                            index: "readerList",
                            title: "读者用户列表",
                        },
                        {
                            index: "readerAdd",
                            title: "读者用户添加",
                        },
                    ],
                },
                {
                    icon: "el-icon-setting",
                    index: "newsCenter",
                    title: "新闻管理",
                    subs: [
                        {
                            index: "newsList",
                            title: "读者用户列表",
                        },
                        {
                            index: "newsAdd",
                            title: "读者用户添加",
                        },
                    ],
                },
            ],
        };
    },
    //传送数据给header
    created() {
        eventBus.$on("collapse", (msg) => {
            this.collapse = msg;
        });
    },
    computed: {
        onRoutes() {
            return this.$route.path.replace("/", "");
        },
    },
};
</script>

<style>
body {
    margin: 0px;
}

.p_sys_logo {
    text-align: center;
    margin: 0;
}

.system_logo {
    font-size: 38px;
    width: 100%;
    height: 60px;
    /* margin: 0 auto; */
    line-height: 60px;
    color: white;
}

.el-aside {
    background-color: #324157;
}

/* 二级菜单文字颜色 */
.el-menu-item,
.el-submenu__title {
    color: white;
    /*取消鼠标闪烁 */
    caret-color: rgba(0, 0, 0, 0);
}

.el-menu-vertical-demo {
    min-height: 400px;
}

/* 去除鼠标点击、点击后、悬浮的背景色 */
.el-menu,
.el-submenu__title:hover,
.el-menu-item:focus,
.el-menu-item:hover {
    background-color: transparent;
    color: #409eff;
}
.el-menu--collapse .el-menu-item span,
.el-menu--collapse .el-submenu .el-submenu__title span {
    height: 0;
    width: 0;
    overflow: hidden;
    visibility: hidden;
    display: inline-block;
}
/* 限定宽度，只保留图标 */
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    border: 0px;
    min-height: 400px;
    /* min-height: 100%; */
    /* background: #242f42; */
    /* background-color: #242f42; */
}
</style>
